<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>User List</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery.slim.min.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{js/index.js}"></script>
  <style>
    body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
    }

    h1 {
      text-align: center;
      color: #333;
      padding: 20px;
    }

    table {
      width: 100%;
      margin: 20px auto;
      background-color: #fff;
      border-collapse: collapse;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    th, td {
      padding: 10px;
      text-align: center;
      border-bottom: 1px solid #ddd;
    }

    th {
      background-color: #f2f2f2;
      color: #333;
    }

    tr:hover {
      background-color: #f2f2f2;
    }

    .actions {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .actions a {
      margin: 0 5px;
      padding: 5px 10px;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
    }

    .delete {
      background-color: #ff3333;
    }

    .edit {
      background-color: #0099cc;
    }

    .disable {
      background-color: #999999;
    }

    tfoot {
      text-align: center;
      width: 100%;
      text-align: center;
    }

    tfoot a {
      text-decoration: none;
      margin: 5px 10px;
      color: #007bff;
    }

    tfoot a:hover {
      text-decoration: underline;
      color: #209a22;
    }

    tfoot a:visited {
      color: #007bff;
    }

    tfoot a.current_page {
      color: black;
    }

    tfoot a.current_page:hover {
      color: black;
      text-decoration: none;
    }
    .search-form {
      display: flex; margin-bottom: 20px;
    }
    .search-form input {
      padding: 5px 10px;
      border-radius: 4px 0 0 4px;
      border: 1px solid #ddd;
    }
    .search-form button {
      padding: 5px 15px;
      border-radius: 0 4px 4px 0;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
    }
.edit{
  cursor: pointer;
}
  </style>
  <script th:inline="javascript">
    /* 将"message"属性传递给JavaScript变量 */
    var message = [[${message}]];
    /* 使用JavaScript弹窗输出 */
    if (message != null) {
      alert(message);
    }
  </script>
</head>
<body>
<form class="search-form" action="/selectAllFile" method="get">
  <input type="text" name="name" th:value="${search.name}" placeholder="请输入文件名称"><br>
  <input type="text" name="uploadIp" th:value="${search.uploadIp}" placeholder="请输入上传用户名称"><br>
  <button type="submit">搜索</button>
</form>
<p th:if="${message} != null">
  <p th:text="${message}"></p>
</p>
<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>文件名称</th>
    <th>文件大小</th>
    <th>文件上传用户</th>
    <th>文件链接</th>
    <th>文件上传时间</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="file ,status : ${fileList.data}">
    <td th:text="${status.index + 1}"></td>
    <td th:text="${file.name}">John</td>
    <td th:text="${file.size}+KB">john@example.com</td>
    <td th:text="${file.uploadIp}">john@example.com</td>
    <td th:text="${file.downloadLink}">john@example.com</td>
    <td th:text="${file.createTime}">john@example.com</td>
    <td class="actions">
      <!--<a th:href="@{'/deleteFile/'+${file.id}}" class="delete">删除</a>-->
        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" th:data-id="${file.id}" th:data-whatever="${file.name}">删除</button>
      <a th:href="@{'' + ${file.downloadLink}}" target="_blank" class="edit">查看</a>
      <!--<a style="background-color: #099f27;" th:href="@{'/download'+${file.downloadLink}}" class="edit">下载</a>-->
      <form th:action="@{/download}" method="get">
        <input type="hidden" name="downloadLink" th:value="${file.downloadLink}">
        <input type="submit" class="btn btn-primary"  value="下载"  style="background-color: #2ecc54">
      </form>
    </td>
  </tr>
  </tbody>

  <tfoot th:if="${fileList.data.size()>0 and fileList.totalPage>1}">
  <tr>
    <th colspan="10">
        <span th:if="${fileList.hasPrePage}">
            <a th:href="@{/selectAllFile(p=${fileList.prePage},s=${fileList.pageSize},name=${search.name},uploadIp=${search.uploadIp})}">上一页</a>
        </span>

      <span th:if="!${fileList.hasPrePage}">
            上一页
        </span>
      <!--     循环页码   -->
      <span th:each="num : ${fileList.pageNumbers}">
           <a th:if="${num == fileList.pageNum}" th:text="${num}" class="current_page"></a>
           <a th:if="${num != fileList.pageNum}" th:href="@{/selectAllFile(p=${num},name=${search.name},uploadIp=${search.uploadIp},s=${fileList.pageSize})}"
              th:text="${num}"></a>
        </span>

      <span th:if="${fileList.hasNextPage}">
            <a th:href="@{/selectAllFile(p=${fileList.nextPage},s=${fileList.pageSize},name=${search.name},uploadIp=${search.uploadIp})}">下一页</a>
        </span>

      <span th:if="!${fileList.hasNextPage}">
            下一页
        </span>
    </th>
  </tr>
  </tfoot>
</table>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">提示框</h5>
                <div class="modal-body">
                    <form>
                        <input type="hidden" name="id" id="number-id">
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="deleteButton()">确定</button>
            </div>
            </form>
        </div>
    </div>
</div>
<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever')
        var recipient02 = button.data('id')
        // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('你确定要删除 ' + recipient)
        modal.find('.modal-body input').val(recipient02)
    });
    function deleteButton(){//删除
        var id = $('#number-id').val()//拿到表单中的id的值
        //发送axios请求
        axios({
            method: 'get',
            // url: 'http://8.134.144.39:9000/deleteFile/'+id
            url: 'http://localhost:9000/deleteFile/'+id
        }).then(function (response){
            console.log("ok")
        })
        location.reload();//刷新当前浏览器http://8.134.144.39:9000/
    }
</script>
</body>
</html>
